<template>
	<view>
		<u-row>
			<u--input class="search" placeholder="search" border="false" v-model="query" @change="change"></u--input>
			<!-- <view class="more">
				<uni-icons type="search" size="24"></uni-icons>
				<uni-icons type="more-filled" size="24"></uni-icons>
			</view> -->
		</u-row>
		<view class="filesList">
			<u-grid :border="false" col="3" style="width: 700rpx;padding-top: 50rpx;">
				<u-grid-item v-for="i in 10" style="margin-bottom: 52rpx;">
					<img src="@/static/img/folder.png" alt="" style="width: 110rpx;height: 94rpx;" />
					<text class="grid-text">ICBC</text>
				</u-grid-item>
			</u-grid>
			<!-- <u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in 3" :key="index">
					<u-cell size="large" :title="`section-${index + 1}`" isLink label="today date" :border="false" class="cell-item">
						<u-avatar slot="icon" shape="square" size="50" :src="item.url"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
						<view slot="right-icon" class="u-slot-title">
							<uni-icons type="more-filled" size="24"></uni-icons>
						</view>
					</u-cell>
				</u-list-item>
			</u-list> -->
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {

		data() {
			return {
				query: '',
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
	}

.search {
		width: 700rpx;
		height: 66rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		border-radius: 100rpx;
		margin: 24rpx 0 42rpx;
	}
	.more {
		width: 180rpx;
		height: 65rpx;
		padding: 0 34rpx 0 66rpx;
		line-height: 65rpx;
	}

	/* .filesList {
		width: 672rpx;
		padding: 50rpx 0;
	} */

	.filesList .cell-item {
		margin-bottom: 40rpx;
	}
</style>